<template>
    <div class="container">
        <template>
            <div class="title">中青嘉信财富</div>
            <van-form @submit="onSubmit">
                <van-cell-group>
                    <van-field name="phone" :rules="[{ validator: phoneValidator, message: '请输入正确手机号' }]" v-model="phone" label="手机号" placeholder="手机号">
                        <template #button>
                            <van-button size="small" type="primary" native-type="button" @click="sendVerifyCode(phone)" :disabled="isSending">{{
                                isSending ? `${count}s后失效` : "发送验证码"
                            }}</van-button>
                        </template>
                    </van-field>
                    <van-field name="captcha" v-model="captcha" label="验证码" placeholder="请输入验证码" />

                    <van-field type="password" name="password" v-model="password" label="密码" placeholder="密码" :rules="[{ validator: pswValidator, message: '密码至少为6位数' }]" />
                    <van-field type="password" name="confirmPassword" v-model="confirmPassword" label="确认密码" placeholder="确认密码" :rules="[{ validator: validator, message: '密码不一致' }]" />
                </van-cell-group>
                <div class="btn">
                    <van-button :loading="isLoading" loading-text="提交中..." round block type="primary" native-type="submit"> 注册 </van-button>
                </div>
            </van-form>
        </template>
    </div>
</template>

<script>
    import { register } from "@/api/login";
    import { Toast } from "vant";
    import { sendVerifyCode } from "@/api/common";
    export default {
        data() {
            return {
                phone: "",
                password: "",
                confirmPassword: "",
                showNext: false,
                _captcha: "",
                captcha: "",
                isSending: false,
                isLoading: false,
                count: 120,
                timer: null,
            };
        },
        methods: {
            async onSubmit(values) {
                this.isLoading = true;
                let { password, captcha, phone } = values;
                let res = await register({ password, captcha, phone });
                if (res.code === 1) {
                    Toast("注册成功,请重新登录！");
                    setTimeout(() => {
                        this.$router.replace("/login");
                    }, 2000);
                }
                this.isLoading = false;
            },
            async sendVerifyCode(phone) {
                if (!/^1[3456789]\d{9}$/.test(phone)) {
                    Toast("手机号格式不正确！");
                    return;
                }
                this.isSending = true;
                this.startCount();
                let data = await sendVerifyCode({ phone });
                this._captcha = data;
            },
            startCount() {
                let _this = this;
                let timer = setInterval(() => {
                    if (_this.count === 0) {
                        clearInterval(timer);
                        _this.count = 120;
                        _this.isSending = false;
                    }
                    _this.count--;
                    _this.timer = timer;
                }, 1000);
            },
            validator(val) {
                if (val !== this.password) {
                    return false;
                }
            },
            phoneValidator(val) {
                if (!/^1[3456789]\d{9}$/.test(val)) {
                    return false;
                }
            },
            pswValidator(val) {
                if (val.length < 6) {
                    return false;
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .container {
        padding-top: 30%;
    }
    .title {
        text-align: center;
        font-size: 30px;
        margin-bottom: 40px;
    }
    .btn {
        width: 90%;
        margin: 30px auto 20px;
    }
</style>